import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import AppLayout from "../../layouts/AppLayout";
import {GlobalStore} from "../../context";
import DownloadWrapper from "../../shared-components/DownloadWrapper/DownloadWrapper";
import LocalStorageService from "../../utils/LocalStorageService";
import {getGameLoginInfo, getGameVisitorInfo, getTaskInfoReq} from "../../apis/goApis";
import './ren_wu.css'
import small_tri from '../../res/images/web/ren_wu/little triangle red备份 2@2x.png'
import {Modal, Toast, WhiteSpace} from "antd-mobile";
import touxiang from '../../res/images/web/ren_wu/头像-任务@2x.png'
import liwu from '../../res/images/web/ren_wu/Gift@2x.png'
import dajiang from '../../res/images/web/ren_wu/大奖@2x.png'
import vip_juan from '../../res/images/web/ren_wu/vip券@2x.png'
import {GiftMapper} from "../../utils/constants";
import SignIcon from "../../res/images/web/task/renwu／sign@2x.png";
import VerifyIcon from "../../res/images/web/task/renwu／shiming@2x.png";
import VideoIcon from "../../res/images/web/task/renwu／vidio@2x.png";
import CommentIcon from "../../res/images/web/task/renwu／pinglun@2x.png";
import ReadIcon from "../../res/images/web/task/renwu／read@2x.png";
import {getDom, log} from "../../utils/commonfunc";

class Renwu extends React.Component {
    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            taskUrl: '',
        }
    }

    componentDidMount() {
        if (this.uid) {
            this.getTaskUrl()
            this.bindEvents()
        } else {
            Toast.fail('请登陆或注册')
            setTimeout(() => this.props.history.push('./login'), 500)
        }
    }

    callGame = (name) => {
        if (this.uid) {
            getGameLoginInfo({
                Uid: this.uid,
                Gametype: name,
            })
                .then(res => {
                    console.log("res", res)
                    if (res.data.ok) {
                        const gameUrl = res.data.ok.gameUrl
                        window.location = gameUrl
                    }
                })
        } else {
            Toast.fail('请登陆')
        }
    }

    bindEvents = () => {
        window.addEventListener('message', (e) => {
            const url = e.data
            if (url) {
                const ends = {
                    "https://jump?page=hlxs": "./mall",
                    "https://jump?page=client_czjb": "./wallet",
                    "https://jump?page=client_ckfa": "./game",
                    "https://jump?page=client_ydzx": "./home",
                    "https://jump?page=client_kbs": "./game",
                    "https://jump?page=client_yqhy": "./userinfo/yqm",
                    "https://jump?page=client_fxbs": "./game",
                    "https://jump?page=client_ltft": "./home",
                    "https://jump?page=client_cylt": "./game",
                    "https://jump?page=client_wyx": () => this.callGame('manghe'),
                    "https://jump?page=client_gjvip": "./vip-goods",
                    "https://jump?page=client_ksplyd": () => Toast.info('请到客户端登录操作', 1),
                    "https://jump?page=shop": "./mall",
                    "https://playGame?game=dianqiu": () => this.callGame('dianqiu'),
                    "https://playGame?game=manghe": () => this.callGame('manghe'),
                }
                const end = ends[url]
                if (typeof end === 'string') {
                    if (end === './mall') {
                         if (this.uid) {
                             this.props.history.push(end)
                         } else {
                             Toast.fail('请先登录或注册')
                         }
                    } else {
                        this.props.history.push(end)
                    }

                } else if (typeof end === 'function') {
                    log('function')
                    end()
                }


            }
        })
    }

    getTaskUrl = () => {
        const uid = this.uid
        if (uid) {
            const params = {
                uid: this.uid,
                Gametype: 'task',
            }
            getGameLoginInfo(params)
                .then((res) => {
                    const data = res.data.ok
                    const taskUrl = data.gameUrl
                    const end = taskUrl + '&isH5=true'
                    this.setState({
                        taskUrl: end,
                    })
                })
        } else {
            getGameVisitorInfo()
                .then((res) => {
                    const data = JSON.parse(res.data.ok)
                    this.setState({
                        taskUrl: data.gameUrl + '&isH5=true',
                    })
                })
        }
    }


    render() {
        return <AppLayout>
            <div
                style={{
                    width: window.innerWidth,
                    height: window.innerHeight - 45,
                }}
            >
                <iframe
                    src={this.state.taskUrl}
                    height={window.innerHeight - 45}
                    width={window.innerWidth}
                    style={{
                        overflowY: 'scroll',
                    }}
                    frameBorder='no'
                />
            </div>

        </AppLayout>
    }
}

export default withRouter(Renwu)

// const storage = LocalStorageService

// 邀请任务 14
// 签到 3
// 每日视频 1
// 实名认证 16
// 每日阅读文章 15
// 每日讨论区话题或者留言 5
const taskMapper = {
    task_3: {
        title: '每日签到',
        icon: SignIcon,
        buttonTxt: '去签到',
        path: './my',
    },
    task_6: {
        title: '实名认证',
        icon: VerifyIcon,
        buttonTxt: '去认证',
        path: './userinfo/realinfo'
    },
    task_1: {
        title: '每日视频',
        icon: VideoIcon,
        buttonTxt: '去观看',
        path: './video',
    },
    task_15: {
        title: '每日阅读文章',
        icon: ReadIcon,
        buttonTxt: '去阅读',
        path: './home'
    },
    task_5: {
        title: '每日讨论区话题或者留言',
        icon: CommentIcon,
        buttonTxt: '去评论',
        path: './home',
    },
}

// class Renwu extends React.Component {
//
//     constructor(props) {
//         super(props)
//         this.login = storage.get('isLogin')
//         this.state = {
//             inviteList: [],
//             dailyList: [],
//             userDetail: {},
//         }
//     }
//     componentDidMount() {
//         if (this.login) {
//             this.getUserDetail()
//                 .then(() => {
//                     this.getTaskInfo()
//                 })
//         } else {
//             this.setDefaultData()
//         }
//     }
//
//     setDefaultData = () => {
//         let inviteList = []
//         for (let i = 0; i < 7; i++) {
//             inviteList.push({
//                 Data: {Id: 0, Name: "", Head: "", Gifts: null, Uid: ""},
//                 Info: "",
//             })
//         }
//         let dailyList = [
//             {
//                 "Id": 1,
//                 "Finish": 0,
//                 "Total": 2,
//                 "Info": [
//                     "金币+10"
//                 ]
//             },
//             {
//                 "Id": 3,
//                 "Finish": 0,
//                 "Total": 1,
//                 "Info": [
//                     "金币+5"
//                 ]
//             },
//             {
//                 "Id": 4,
//                 "Finish": 0,
//                 "Total": 3,
//                 "Info": [
//                     "金币+10"
//                 ]
//             },
//             {
//                 "Id": 5,
//                 "Finish": 0,
//                 "Total": 3,
//                 "Info": [
//                     "金币+10"
//                 ]
//             },
//             {
//                 "Id": 15,
//                 "Finish": 0,
//                 "Total": 8,
//                 "Info": [
//                     "赠3日会员券1张"
//                 ]
//             },
//             {
//                 "Id": 16,
//                 "Finish": 0,
//                 "Total": 1,
//                 "Info": [
//                     "赠月度会员券1张"
//                 ]
//             }
//         ]
//         this.setState({
//             inviteList,
//             dailyList,
//         })
//     }
//
//     getTaskInfo = () => {
//         getTaskInfoReq({
//             uid: storage.get('userid')
//         }).then(resp => {
//             const data = resp.data
//             this.setState({
//                 inviteList: data.yaoqing,
//                 dailyList: data.meiri,
//             })
//         })
//     }
//
//     getUserDetail = async () => {
//         await this.props.fetchUserDetail({
//             uid: storage.get('userid')
//         })
//     }
//
//     linkButton = ({title, active = true, onClick,}) => {
//         return <button
//             className={active ? 'renwu-button' : 'renwu-button renwu-button-disabled'}
//             onClick={active ? onClick : () => {}}
//         >
//             {title}
//         </button>
//     }
//
//     renderCoin = (coins) => {
//         return <>
//             <div
//                 className='coin-ctn'
//             >
//                 {/*<div className='duihuan-button'>*/}
//                 {/*    <span>规则</span>*/}
//                 {/*</div>*/}
//                 <p>我的金币</p>
//                 <p className='big-int'>{coins}</p>
//                 <div
//                     className='rule-button'
//                     onClick={() => this.props.history.push('./gift')}
//                 >
//                     <span>去兑换</span>
//                     <img src={small_tri}/>
//                 </div>
//             </div>
//
//             <WhiteSpace />
//             <div className='flex-space-between-align-center'>
//                 <span className='gray-text'>我的邀请</span>
//                 <span className='gray-text'>我的奖励</span>
//             </div>
//             <WhiteSpace />
//         </>
//     }
//
//     renderGifts = (gifts) => {
//         const template = gifts.map((gift, index) => {
//             const giftId = gift.split('-')[0]
//             const giftCount = gift.split('-')[1]
//             const itemStyle = {
//                 marginRight: '12px',
//             }
//             if (giftId === 'vip') {
//                 return <div
//                     key={index}
//                     className='flex-align-center'
//                     style={{
//                         ...itemStyle,
//                         marginRight: '4px',
//                     }}
//                 >
//                     <div
//                         style={{
//                             width: 66,
//                             height: 22,
//                             background: `url("${vip_juan}") no-repeat 50% 50%/cover`,
//                             marginRight: '4px',
//                         }}
//                         className="flex-center-align-center"
//                     >
//                         <span
//                             style={{
//                                 fontSize: '12px',
//                                 color: '#774D00',
//                             }}
//                         >{`${giftCount}日VIP卷`}</span>
//                     </div>
//                     <span>×1</span>
//                 </div>
//             } else {
//                 const id = `gift_${giftId}`
//                 const giftDate = GiftMapper[id]
//                 return <div
//                     key={index}
//                     className='flex-align-center'
//                     style={{
//                         ...itemStyle,
//                     }}
//                 >
//                     <img src={giftDate.src} alt={giftDate.name}  style={{width: 28, height: 28, marginRight: '4px',}}/>
//                     <span>×{giftCount}</span>
//                 </div>
//             }
//         })
//
//         return template
//     }
//
//     renderInviteList = (list) => {
//         const template = list.map((user, index) => {
//             // Data: {Id: 0, Name: "", Head: "", Gifts: null, Uid: ""}
//             // Info: "邀请好友得75-80金币礼物奖励,3日会员券一张!"
//             const {
//                 Data: data,
//                 Info: info,
//             } = user
//             const {
//                 Name: name,
//                 Head: icon,
//                 Gifts: gifts,
//             } = data
//             const iconTemplate = gifts
//                 ? <>
//                     <div
//                         className='user-icon'
//                         style={{
//                             background: `url("${icon}") no-repeat 50% 50%/cover`,
//                             marginRight: '8px',
//                         }}
//                     />
//                     <span>{name}</span>
//                 </>
//                 : <div>
//                     <img src={touxiang} style={{width: 28, height: 28,}}/>
//                 </div>
//
//             const last = index === list.length - 1
//             const normalInfo = '邀请好友得1-99金币奖励！'
//             const lastInfo = '邀请满7人得超级大奖！'
//
//             const infoTemplate = <div className='invite-item-info flex flex-align-center'>
//                 <img src={last ? dajiang : liwu}  alt='' className={last ? 'last' : ''}/>
//                 <p>{last ? lastInfo : normalInfo}</p>
//             </div>
//             const button = this.linkButton({
//                 title: '去邀请',
//                 onClick: () => {
//                     Modal.alert('下载客户端可邀请好友', '',)
//                 }
//             })
//             const giftsTemplate = gifts && this.renderGifts(gifts)
//             return <div
//                 className='invite-item'
//                 key={index}
//             >
//                 <div className="flex-align-center">
//                     {iconTemplate}
//                     {gifts ? null : infoTemplate}
//                 </div>
//                 <div className="flex-align-center">
//                     {gifts ? giftsTemplate : button}
//                 </div>
//             </div>
//         })
//         return template
//     }
//
//     renderMore = (list) => {
//         const template = list.map((task, index) => {
//             const {
//                 Total: total,
//                 Info: info,
//                 Finish: finish,
//             } = task
//             const taskId = `task_${task.Id}`
//             const taskData = taskMapper[taskId]
//             if (taskData) {
//                 const isFinish = finish === total
//                 const template = <div
//                     className='task-item flex-space-between-align-center'
//                     key={index}
//                 >
//                     <div className='flex-align-center'>
//                         <img src={taskData.icon} alt='' style={{width: 24, height: 24, marginRight: '12px',}}/>
//                         <div className='task-desc'>
//                             <p className='task-desc-title'>
//                                 {taskData.title}
//                                 <span className='gray-text'>{`（${finish}/${total}）`}</span>
//                             </p>
//                             {info && info.map(i => <p key={i} className='task-desc-info'>{i}</p>)}
//                         </div>
//                     </div>
//                     <div>
//                         {this.linkButton({
//                             title: taskData.buttonTxt,
//                             active: !isFinish,
//                             onClick: () => {
//                                 this.props.history.push(taskData.path)
//                             }
//                         })}
//                     </div>
//                 </div>
//                 return template
//             }
//         })
//         return template
//     }
//
//     render() {
//         const coins = this.props.userDetail.Gold
//
//         const title = <p className='ren_wu_container-title'>
//             邀请好友下载APP并注册成功 均可获得奖励
//         </p>
//
//         const invite = <div className='ren_wu_sub_container'>
//             {this.renderCoin(coins)}
//             <div className='invite-container'>
//                 {this.renderInviteList(this.state.inviteList)}
//             </div>
//         </div>
//
//         const gap = <>
//             <WhiteSpace />
//             <p>
//                 更多任务
//             </p>
//             <WhiteSpace />
//         </>
//
//         const more = <div
//             className="ren_wu_sub_container"
//             style={{
//                 padding: 0,
//                 borderRadius: 0,
//             }}
//         >
//             {this.renderMore(this.state.dailyList)}
//         </div>
//
//         return <AppLayout>
//             <DownloadWrapper>
//                 <div className='ren_wu_container'>
//                     {title}
//                     {invite}
//                     {gap}
//                     {more}
//                 </div>
//             </DownloadWrapper>
//         </AppLayout>
//     }
// }
//
// Renwu.contextType = GlobalStore
//
// const mapStateToProps = state => ({
//     userDetail: state.user.userdetail,
// })
// const mapDispatchToProps = ({user: {fetchUserDetail}, global: {doLogoutGo, doFreshToken,},}) => ({
//     fetchUserDetail: (id) => fetchUserDetail(id),
// })
//
// export default connect(
//     mapStateToProps,
//     mapDispatchToProps,
// )(withRouter(Renwu))